<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 0 auto;
            border: 1px solid black;
            width: 500px;
            height: 100px;
            margin-top: 50px;
            display: flex;
            font-size: 12px;
            text-align: center;
            line-height: 25px;
            justify-content: center;
            align-items: center;
        }

        .leftnum {
            width: 25px;
            height: 25px;
            border: 1px solid black;
        }

        .rightnum {
            width: 25px;
            height: 25px;
            border: 1px solid black;
        }

        .slidingstrip {
            width: 200px;
            height: 20px;
            border: 1px solid pink;
            margin-top: 2.5px;
            margin: 2.5px 10px;
            position: relative;
        }

        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: burlywood;
            position: absolute;
            left: -10px;
        }

        .strip {
            background-color: gold;
            width: 0;
            height: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="leftnum">0</div>
        <div class="slidingstrip">
            <div class="ball"></div>
            <div class="strip"></div>
        </div>
        <div class="rightnum">100</div>
    </div>
    <script>
        const rightnum = document.querySelector('.rightnum')
        const leftnum = document.querySelector('.leftnum')
        const ball = document.querySelector('.ball')
        const strip = document.querySelector('.strip')
        const slidingstrip = document.querySelector('.slidingstrip')
        ball.onmousedown = function (e) {
            const this_ = this
            const e_ = e || window.event
            document.onmousemove = function (e) {
                const e_ = e || window.event
                e_.clientX - 550 <= -10 ? this_.style.left = -10 + 'px' : this_.style.left = e_.clientX - 550 + 'px'
                e_.clientX - 550 >= 190 ? this_.style.left = 190 + 'px' : 1
                e_.clientX - 550 <= -1 ? strip.style.width = 0 + 'px' : strip.style.width = 10 + e_.clientX - 550 + 'px'
                e_.clientX - 550 >= 200 ? strip.style.width = 200 + 'px' : strip.style.width = 10 + e_.clientX - 550 + 'px'
                leftnum.innerText = parseInt(parseInt(strip.style.width) / 2)
            }
            document.onmouseup = function () {
                document.onmousemove = null
            }
        }
    </script>
</body>

</html>